<link rel="stylesheet" href="/resource/kalendae/build/kalendae.css" type="text/css" charset="utf-8">
<!--
<script src="src/moment.js" type="text/javascript" charset="utf-8"></script>
<script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script>
-->
<script src="/resource/kalendae/build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
/** 表格样式 **/
.datesel { background-color: #eee; display: inline-block; width: 480px;border: 1px solid  #e5e5e5;  }
.tbcal { width: 100%;  }
.tbcal .left { width: 30%; }
.tbcal .right{ position: relative; width: 70%;  }
.kalendae .k-days span.closed {
	background:red;
}
.datesel .left .time { padding-left: 20px; color: #898989; font-size: 14px; }
.datesel .left .time input { display: block; width: 134px; height: 40px; background: #fff url(/resource/www/imgs/date_icon.png) no-repeat 10px 6px; padding-left: 40px; }

.kalendae .k-calendar { width: 290px; }
.k-title { position: relative; }
.datesel .k-title .k-caption { position: relative; top: -10px ; }
#readonly-box .k-title .k-caption { position: relative; top: -10px ; }
.kalendae .k-title, .kalendae .k-header, .kalendae .k-days { width: 290px; }
.kalendae .k-days span { background: #ddd; width: 34px; height: 34px; line-height: 34px; text-align: center; padding: 0; margin: 2px; }
.kalendae .k-header span {  width: 36px; height: 36px; line-height: 36px; text-align: center; }

.kalendae .k-caption {  font-weight: bold; font-size: 18px;   color: #262626;}

.tbcal .mulcal {  width: 290px; position: relative;}

.kalendae .k-days span.k-in-month.k-active { background: #fff; color: #444; }
.kalendae .k-days span.k-in-month { color: #fff; }
.kalendae .k-days span.k-selected.k-active {  background: #2cda98; color: #fff; }
.kalendae .k-days span.k-out-of-month {color:#fff;}
.kalendae .k-days span.k-out-of-month.k-selected.k-active {color:#fff;background-color:#ddd;border:none;cursor:default;}

.right .cal-btn-prev { cursor: pointer; position: absolute; width: 26px; height: 26px; left: 285px; top: 73px; background: url(/resource/www/imgs/rili_up.png) no-repeat; }
.right .cal-btn-next { cursor: pointer; position: absolute; width: 26px; height: 26px; left: 285px; bottom: 17px; background: url(/resource/www/imgs/rili_down.png) no-repeat; }

#readonly-box { clear: both; display: none; max-width: 900px; padding: 0; margin: 0;}
#readonly-box .k-calendar { padding-top: 10px; }
#readonly-box .k-separator { display: none; }
</style>
<script type="text/javascript" charset="utf-8">
var global_kal = null;
var global_kal_readonly = null;

function getWeeklyDatesBetweenDays (day1, day2, wDay, type)
{
    if (wDay == '周日')
        iW = 0;
    else if (wDay == '周一')
        iW = 1;
    else if (wDay == '周二')
        iW = 2;
    else if (wDay == '周三')
        iW = 3;
    else if (wDay == '周四')
        iW = 4;
    else if (wDay == '周五')
        iW = 5;
    else if (wDay == '周六')
        iW = 6;

    d1 = new Date(day1);
    d2 = new Date(day2);
    dx = d1;
    i  = 0;

    //global_kal.setSelected();

    for (; dx.getTime() <= d2.getTime(); i = i + 1 )
    {
        if (dx.getDay() == iW)
        {
            if (type == 'add'){
                var dx_format=dx.toDateString();
               if(!global_kal.isSelected(dx_format)){
                global_kal.addSelected(dx_format);}
            }
            else{
                var dx_format=dx.toDateString();
               if(global_kal.isSelected(dx_format)){
                global_kal.removeSelected(dx_format);}
            }
        }

        dx.setTime(dx.getTime() + 86400000);
    }

    global_kal.draw();
}

$(document).ready(function () {

        $('input[name=tipsStartDay]').val($('input[name=startDay]').val());
        $('input[name=tipsStopDay]').val($('input[name=stopDay]').val());


        $('.week,.fix').find('span.zhou').click(function () {

            var label = $(this).html();

            // 切换active
            type = 'add';
            //$(this).parent().find('span').removeClass('active');
            if ($(this).hasClass('active'))
            {
                $(this).removeClass('active');
                type = 'remove';
            }
            else
            {
                $(this).addClass('active');
                type = 'add';
            }

            getWeeklyDatesBetweenDays($('input[name=startDay]').val(), $('input[name=stopDay]').val(), label, type);
        });
        global_kal = new Kalendae({
            attachTo: document.getElementById("mulcal"),
			months:1,
            weekStart: 1,
	    mode:'multiple',
			//selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})],
            //selected: ['2015-12-11', '2015-12-28'],
            useYearNav: false,
            useMonthNav: false,
            columnHeaderFormat: "dd",
            titleFormat: "YYYY年MM月",
            blackout : function (x) {
                var d1 = Kalendae.moment($('input[name=startDay]').val());
                var d2 = Kalendae.moment($('input[name=stopDay]').val());
                d2.add(1, 'days');
                if (x.isBetween(d1, d2))
                    return false;
                else
                    return true;
            }
        });

        var frees=$('input[name=freeTimeDays]').val();
        if ($('input[name=startDay]').val())
        {
            global_kal.viewStartDate = Kalendae.moment($('input[name=startDay]').val());
            frees=frees.split(",");
            for(var i=0;i<frees.length;i++){
            global_kal.addSelected(frees[i]);
            }
            global_kal.draw();
        }
        $("#startD").change(function(){
        	global_kal.viewStartDate = Kalendae.moment($('input[name=startDay]').val());
              var sdays = global_kal.getSelectedRaw();
              var sd = Kalendae.moment($(this).val());
             for(var i=0;i<sdays.length;i++){
              if( sdays[i].isBefore(sd)){global_kal.removeSelected(sdays[i]);}
             }
        global_kal.draw();
               
        });
        $("#endD").change(function(){
              var sdays = global_kal.getSelectedRaw();
              var ed = Kalendae.moment($(this).val());
             for(var i=0;i<sdays.length;i++){
              if( sdays[i].isAfter(ed)){global_kal.removeSelected(sdays[i]);}
             }
        global_kal.draw();
               
        });


});

function cal_next_month ()
{
    global_kal.viewStartDate.add(1, 'months');
    global_kal.draw();
    var monthstop= Kalendae.moment($('input[name="tipsStopDay"]').val()).month();
    var yearstop= Kalendae.moment($('input[name="tipsStopDay"]').val()).year();
    var monthnow=global_kal.viewStartDate.month();
    var yearnow=global_kal.viewStartDate.year();
    if( yearnow>yearstop ? true : (yearnow==yearstop ? monthnow>=monthstop:false))
    {$('span.cal-btn-next').hide();}
    if($('span.cal-btn-prev').is(':hidden'))
    {$('span.cal-btn-prev').show();}
}

function cal_prev_month ()
{
    global_kal.viewStartDate.subtract(1, 'months');
    global_kal.draw();
    var monthstart= Kalendae.moment($('input[name="tipsStartDay"]').val()).month();
    var yearstart= Kalendae.moment($('input[name="tipsStartDay"]').val()).year();
    var monthnow=global_kal.viewStartDate.month();
    var yearnow=global_kal.viewStartDate.year();
    if(yearnow<yearstart?true:(yearstart==yearnow?monthnow<=monthstart:false))
    {$('span.cal-btn-prev').hide();}
    if($('span.cal-btn-next').is(':hidden'))
    {$('span.cal-btn-next').show();}
}

function cal_show_result ()
{
    // 清空内部内容
    global_kal_readonly = null;
    $('#readonly-box').html('');

    var d1 = Kalendae.moment($('input[name=startDay]').val());
    var d2 = Kalendae.moment($('input[name=stopDay]').val());
    var d0 = Kalendae.moment(d1);

    var countsMonth = 1;
    var currMonth   = d1.month();
    while (d1.isBefore(d2))
    {
        if (d1.month() != currMonth)
        {
            currMonth    = d1.month();
            countsMonth += 1;
        }

        d1.add(1, 'days');
    }

	global_kal_readonly = new Kalendae({
		attachTo: document.getElementById("readonly-box"),
		months:countsMonth,
        columnHeaderFormat: "dd",
        titleFormat: "YYYY年MM月",
        useYearNav: false,
        useMonthNav: false,
		mode:'multiple',

            'subscribe' : {
                'date-clicked' : function (date) {
                    return false;
                }
            },
	
	});
    global_kal_readonly.setSelected(global_kal.getSelected());
    global_kal_readonly.viewStartDate = d0;
    global_kal_readonly.draw();

    var w = $('#readonly-box').width() + 'px';
    var h = $('#readonly-box').height() + 'px';
    layer.open({
        type: 1,
        title: false,
        area: [w, h],
        fix: false,
        content: $('#readonly-box'),
    });
}
</script>


<div class="datesel">
    <table class="tbcal">
    <tr>
        <td class="left">
            <p class="time">开始时间 <input type="text" readonly="true" size="10" name="tipsStartDay" value=""></p>
            <p class="time">结束时间 <input type="text" readonly="true" size="10" name="tipsStopDay" value=""></p>
        </td>
        <td class="right">
            <div id="mulcal"></div>
            <span class="cal-btn-prev" style="display:none;" onclick="cal_prev_month()"></span>
            <span class="cal-btn-next" onclick="cal_next_month()"></span>
        </td>
    </tr>
    </table>
</div>

<div id="readonly-box">
</div>
